<template>
<!-- 导航栏 -->
<div class="header">
  <!-- 导航栏左侧 -->
  <!-- 左侧logo -->
  <div class="head-logo">
    <a @click="toIndex(d.idCard)">
      <img title="CSDN首页" src="../assets/logo.png" />
    </a>
  </div>
  <!-- /左侧logo -->
  <!-- 导航栏列表 -->
  <ul class="header-menus">
    <li class="menustitle" title="阅读深度、前沿文章">
      <a @click="toSearch(d.idCard)">
        博客
      </a>
    </li>
    <li class="menustitle" title="马上开始系统学习">
      <a @click="toMaintain(d.idCard)">
        课程
      </a>
    </li>
    <li class="menustitle" title="文库·商城">
      <a @click="toMaintain(d.idCard)">
        文库·商城
      </a>
    </li>
    <li class="menustitle" title="技术问题，有问必答">
      <a @click="toSearch(d.idCard)">
        问答
      </a>
    </li>
    <li class="menustitle" title="找到志同道合的伙伴">
      <a @click="toSearch(d.idCard)">
        社区
      </a>
    </li>
    <li class="menustitle" title="安装你的浏览器助手">
      <a @click="toSearch(d.idCard)">
        插件
      </a>
    </li>
    <li class="menustitle" title="认证你的技术能力">
      <a @click="toMaintain(d.idCard)">
        认证
      </a>
    </li>
    <li class="menustitle" title="开源">
      <a @click="toSearch(d.idCard)">
        开源
      </a>
    </li>
  </ul>
  <!-- /导航栏左侧 -->


  <!-- 导航栏中部 -->
  <div class="menu-center">
      <input class="search-container" stype="text" v-model="check" value placeholder="智能对话机器人" />
      <button @click="toCheck(d.idCard,check)" class="search-button">
        <span>搜索</span>
      </button>
  </div>
  <!-- /导航栏中部 -->

  <!-- 导航栏右侧 -->
  <div class="menu-right">
    <ul class="header-menus">
      <li class="menustitle username" title="个人信息">
          <a href="#/login" class="login" v-if="type == 0"><router-link :to="{name:'Login'}">登录</router-link></a>
          <a href="#/login" class="login" v-else><router-link :to="{name:'Score'}">欢迎:{{d.idCard}}</router-link></a>
      </li>
      <li class="menustitle" title="会员中心">
        <a  @click="toVip(d.idCard)">
          会员中心
        </a>
      </li>
      <li class="menustitle" title="足迹">
        <a @click="toMaintain(d.idCard)">
          足迹
        </a>
      </li>
      <li class="menustitle" title="动态">
        <a @click="toMaintain(d.idCard)">
          动态
        </a>
      </li>
      <li class="menustitle" title="消息">
        <a @click="toMaintain(d.idCard)">
          消息
        </a>
      </li>
      <li class="menustitle" title="创作">
        <button @click="toServe(d.idCard)" class="creat">创作</button>
      </li>
    </ul>
  </div>
  <!-- /导航栏右侧 -->

  <!-- /导航栏列表 -->
</div>
<!-- /导航栏 -->
</template>

<script>
  import token from "./token.vue"
  import check from "../views/Check.vue"
  export default {
    data() {
      return {
        d: {},
        type: token.type,
        check: token.checkvalue
      }
    },
    name: "Header",

    methods: {
      /*单个id查询用户*/
      findUserById(id) {
        this.updateFormVisible = true
        let _this = this
        console.log(id)
        this.$axios.get("http://localhost:8087/user/getUserById/" + id).then(function(res) {
          _this.d = res.data
        }).catch(function(err) {
          _this.$message('请登录哦~');
        })
      },
      // 退出登录
      loginout() {
        removeItem('id')
      },
      /*模糊查询某类型的资讯*/
      findTypeAll(typename){
         console.log(typename)
        let _this = this
        this.$axios.post("http://localhost:8087/news/selectNewsByType/"+typename).then(function(res){
          if(res.data.length<=0){
            alert('该标签，暂无内容哦~');
          }else{
            console.log('查询到的数据'+res.data)
            _this.tableData = res.data;
            console.log(res.data);
          }
        }).catch(function (err) {
          alert('查询失败')
        })
      },
      /*创作页面跳转*/
      toServe(id){
        if(this.type != 1){
          alert("请先登录哦~");
          window.open("login",'_self');
        } else {
          this.$router.push({ name: 'Serve', params: { id: id }});
        }
      },
      /* 首页跳转 */
      toIndex(id){
        this.$router.push({ name: 'Index', params: { id: id }});
      },
      /* 博客页面跳转 */
      toSearch(id){
        this.$router.push({ name: 'Search', params: { id: id }});
      },
      /* 维护页面跳转 */
      toMaintain(id){
        this.$router.push({ name: 'maintain', params: { id: id }});
      },
      /* Vip页面跳转 */
      toVip(id){
        this.$router.push({ name: 'Vip', params: { id: id }});
      },
      /* 搜索页面跳转 */
      toCheck(id,value){
        if(this.$route.path == "/check"){
          token.checkvalue = value ;
          check.created();
        } else {
        this.$router.push({ name: 'Check', params: { id: id }});
          token.checkvalue = value ;
        }
      },
    },
    created() {
      this.findUserById(localStorage.getItem("id"))
    }
  }
</script>

<style scoped>
  .header{
        flex-direction: row;
        width: 100%;
        min-width: 1280px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 0 24px;
        height: 48px;
        line-height: 48px;
        margin: 0 auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        box-shadow: 0px 15px 10px -15px #d0dae8;
  }
  .head-logo img{
        display: block;
        width: 80px;
        min-width: 80px;
        height: 44px;
        margin-top: calc((48px - 44px)/ 2);
  }
  .header-menus li{
        width: auto;
        height: 100%;
        float: left;
        list-style: none;
        display:block;
  }
  .menustitle a{
          text-decoration:none;
          font-family: "PingFang SC,Hiragino Sans GB,Arial,Microsoft YaHei,Verdana,Roboto,Noto,Helvetica Neue,sans-serif";
          font-size: 14px;
          display: block;
          height: 100%;
          color: inherit;
          padding: 0 10px;
  }
  .username{
    max-height: 48px;
    max-width: 200px;
  }
  .menu-center{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 45%;
        height: 100%;
  }
  .search-container{
        ont-size: 14px;
        display: inline-block;
        width: calc(100% - 304px);
        height: 60%;
        line-height: inherit;
        border: 0 none;
        outline: 0;
        background: #f5f6f7;
        color: #222226;
        vertical-align: top;
        text-indent: 32px;
        border: 1px solid #e8e8ed;
        border-right: none;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-radius: 16px 0 0 16px;
  }
  .search-button{
        display: inline-block;
        width: 88px;
        height: 60%;
        outline: 0;
        border: 0 none;
        border-radius: 0 16px 16px 0;
        font-size: 14px;
        line-height: 32px;
        cursor: pointer;
        -webkit-transition: all .2s ease-in;
        transition: all .2s ease-in;
        background-color: #fc5531;
        text-align: center;
  }
 .menu-center button span {
      margin-top: -3px;
      display: inline-block;
      vertical-align: top;
      color: #fff;
  }
  .menu-right{
        -webkit-box-flex: 0;
        -ms-flex: none;
        flex: none;
        height: 100%;
  }
  .userimg{
        display: block;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        margin-top: 8px;
  }
  .creat{
        display: block;
        min-width: 88px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        color: #fff;
        background: #fc5531;
        border-radius: 20px;
        margin-left: 10px;
        margin-top: calc((48px - 32px)/ 2);
  }
</style>
